<!--
 * @Author: your name
 * @Date: 2021-12-29 21:52:08
 * @LastEditTime: 2022-01-06 09:56:13
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \am-ui\src\pages\am\monitor\Video.vue
-->
<template>
  <div class="realPoinfo">
    <div class="content">
      <div class="left">
        <el-input placeholder="请输入工程关键字"> </el-input>
        <el-tree
          :data="edTree"
          :props="props"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="right">
        <div v-if="todayData.length == 0" class="action">请先选择设备</div>
        <div class="Vk" v-else>
          <video loop="loop" controls :src="this.params.video"></video>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
import Video from "./Video.vue";
export default {
  components: { Video },
  data() {
    return {
      edTree: [],
      props: {
        label: "name",
        value: "id",
      },
      params: {
        page: 1,
        pageSize: 20,
      },
      todayData: [],
    };
  },
  methods: {
    handleNodeClick(data) {
      // 判断用户点击的是否是设备，点击工程时不查询数据
      if (data.engineer_id) {
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.device_id,
          name: data.name,
          video: data.video,
        };
        // 调用请求数据的方法
        this.queryTodayData();
        console.log(data);
      }
    },
    findEngineerDeviceTree() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.edTree = res.data;
      });
    },
    //根据设备ID检索视频数据
    queryTodayData() {
      get("/device/pageQuery", this.params).then((res) => {
        this.todayData = res.data;
      });
    },
  },
  created() {
    this.findEngineerDeviceTree();
  },
};
</script>
<style scoped>
.content {
  display: flex;
}
.Vk video {
  width: 800px;
  margin-top: 100px;
}
.left {
  width: 20%;
  border-right: 1px solid rgb(110, 109, 109);
  padding-right: 10px;
}
.right {
  width: 80%;
}
</style>
<style scoped>
.right {
  text-align: center;
  line-height: 500px;
}
.action {
  font-size: 30px;
  color: rgb(110, 109, 109);
}
</style>
